<template>
  <div class="loginView">
    <div class="logo"></div>
    <div class="logoDes">常熟市公共卫生<br>人力资源管理与培训考试平台</div>
    <div class="loginContent">
      <div class="title">账户登录</div>
      <div class="inputView">
        <div class="inputBar username">
          <input type="text" class="input" v-model="form.username" placeholder="请输入身份证号">
        </div>
      </div>
      <div class="inputView">
        <div class="inputBar password">
          <input type="password" class="input" v-model="form.password" placeholder="请输入密码">
        </div>
      </div>
      <div class="inputView small">
        <div class="inputBar vrcode">
          <input type="text" class="input" v-model="form.captcha" placeholder="请输入验证码">
          <img :src="codeUrl" class="codePic" @click="getCode">
        </div>
      </div>
      <div class="loginBar" @click="onSubmit()">登陆</div>
      <div class="loginDes">
        <span @click="goRegister">注册账号</span>
<!--        <span style="float: right">忘记密码</span>-->
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      time:null,
      codeUrl:null,
      form:{},
    }
  },
  mounted(){
    this.getCode();
  },
  methods:{
    onSubmit(){
      if (!this.form.username){
        this.$notify({ type: 'danger', message: "请输入用户名！" });
      }
      if (!this.form.password){
        this.$notify({ type: 'danger', message: "请输入密码！" });
      }
      if (!this.form.captcha){
        this.$notify({ type: 'danger', message: "请输入验证码！" });
      }
      let obj = this.form
      obj.checkKey = this.time
      const self = this
      this.request({
        url: '/sys/login',
        method: 'post',
        data:obj
      }).then(function (res) {
        if (res){
          let code = res.data.code
          if (code != 200){
            self.$notify({ type: 'danger', message: res.data.message });
          }else {
            let token = res.data.result.token;
            Cookies.set("kaoShi_token", token, { expires: 7 })
            self.$router.push({path: "/index"})
          }
        }
      })
    },
    getCode(){
      let time = new Date().getTime();
      this.time = time
      const self = this
      this.request({
        url: '/sys/randomImage/'+time,
        method: 'get',
      }).then(function (res) {
        if (res){
          let codeUrl = res.data.result
          self.codeUrl = codeUrl
        }
      })
    },
    goRegister(){
      this.$router.push({path: "/register"})
    },
  },
}
</script>

<style lang="scss" scoped>
  .loginView{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99;
    background-size: 100% 100%;
    background-image: url("../assets/img/loginBg.png");
    .logo{
      width: 100%;
      height: 121px;
      background-position: center;
      background-image: url("../assets/img/logo.png");
      background-size: 263px 121px;
      background-repeat: no-repeat;
      margin-top: 150px;
    }
    .logoDes{
      width: 100%;
      height: 110px;
      margin-top: 50px;
      font-size: 45px;
      font-weight: bold;
      font-style: italic;
      color: #FFFFFF;
      line-height: 55px;
    }
    .loginContent{
      width: 616px;
      height: 542px;
      margin-left: 72px;
      margin-top: 35px;
      background-image: url("../assets/img/loginContent.png");
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-right: 12px;
      .title{
        line-height: 40px;
        width: 100%;
        margin-top: 30px;
        height: 40px;
        font-size: 33px;
        font-weight: bold;
        color: #2A5C9F;
        float: left;
      }
      .inputView{
        margin-top: 25px;
        float: left;
        width: 100%;
        height: 63px;
        background-image: url("../assets/img/inputBg.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 477px 63px;
        .inputBar{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding-left: 124px;
          background-position: 90px center;
          background-repeat: no-repeat;
          &.username{
            background-size: 22px 24px;
            background-image: url("../assets/img/username.png");
          }
          &.password{
            background-size: 15px 22px;
            background-image: url("../assets/img/password.png");
          }
          &.vrcode{
            background-size: 19px 21px;
            background-image: url("../assets/img/vrcode.png");
          }
          .input{
            border: 0px;
            height: 54px;
            margin-top: 4px;
            float: left;
            width: 370px;
            background-color: transparent;
            font-size: 25px;
          }
        }
        &.small{
          background-size: 326px 64px;
          background-image: url("../assets/img/inputSmallBg.png");
          background-position: 65px center;
          .inputBar{
            .input{
              width: 260px;
            }
          }
          .codePic{
            float: left;
            width: 142px;
            height: 48px;
            margin-left: 12px;
            margin-top: 8px;
          }
        }
      }
      .loginBar{
        width: 255px;
        height: 56px;
        float: left;
        margin-left: 175px;
        margin-top: 49px;
        background-image: url("../assets/img/loginBar.png");
        background-size: 100% 100%;
        font-size: 30px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 56px;
        letter-spacing:5px;
        text-align: center;
      }
      .loginDes{
        width: 477px;
        height: 55px;
        line-height: 55px;
        float: left;
        margin-left: 63px;
        font-size: 22px;
        font-weight: 400;
        color: #128BF1;
      }
    }
  }
</style>
